<template>
  <div class="HAd-con">
    <!-- <div class="h-hd h_hslect-hd">
      <strong style="color:blue;">基业长青</strong>
    </div> -->
    <div class="block">
      <el-carousel :height="imgHeight+'px'">
        <el-carousel-item v-for="item in adList" :key="item.id">
          <img ref="imgHeight" :src="item.idView" class="img-con" @load="imgLoad"/>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgHeight:"",
      height:"",
      adList:[
        {id:0,idView:require('../../../assets/img/lb1.jpg')},
        {id:1,idView:require('../../../assets/img/lb2.jpg')},
        {id:2,idView:require('../../../assets/img/lb3.jpg')},
        {id:3,idView:require('../../../assets/img/lb4.jpg')}
      ]
    }
  },
  // 走马灯图片自适应(Carousel组件高度是固定的，页面如果缩小就会产生空隙)
  /* 这里通过监听屏幕窗口大小'size'，一旦它发生改变，就通过ref获取图片的高度height，然后渲染到页面，方法如下：
    　　1、ref 加在普通的元素上，用this.ref.name 得到的是dom元素
    　　2、ref 加在子组件上，用this.ref.name 得到的是组件实例，可以使用组件的所有方法。
    　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 
  */
 /* 
      窗口第一次打开，就加载imgLoad()方法，第一次获取图片在视图窗口中的高度，然后渲染到页面
      然后用addEventListenner()方法监听视图是否发生改变，如果发生改变，就重新调用imgLoad()将数据渲染出来，
      将此事图片的高度给imgHeight,这样图片高度就可以随视图的改变而改变，适应各种大小屏幕。
    */
  methods:{
    // 窗口第一次打开，加载imgLoad()方法，获取图片在视图窗口中的高度，然后渲染到页面
    imgLoad(){
      this.$nextTick(()=>{
        this.imgHeight=this.$refs.imgHeight[0].height;        
      })
    }
  },
  mounted(){
    this.imgLoad();
    window.addEventListener('resize',()=>{
      // 注意：ref 置于普通元素时，this.ref.name指向dom元素；ref 置于子组件上，代表组件实例，可以使用该组件的所有方法。
      this.imgHeight=this.$refs.imgHeight[0].height;  
      // 重新调用imgLoad()获取图片高度并渲染
      this.imgLoad()      
    },false)
  }
}
</script>

<style>
  .HAd-con {
    margin: 10px 0 20px 0;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
 /* #imgHeight {
  } */
</style>